/*
 * 素材列表
 */
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import { message,Button, Spin, Form, Input, Table,Modal,Upload,Icon,DatePicker } from 'antd'
import {materiaSelect,materiaInfo,deleteMateria} from 'actions/materialManage'//引入接口方法
import ModalAddMaterialVideo from './addMaterialVideoModal.js';//引用新增弹窗组件
import '../../style/userControl.less'//查看详情的样式
import ShowBigImg from '../../components/showBigImg'
const FormItem = Form.Item
const { MonthPicker, RangePicker } = DatePicker;
@Form.create({})
@connect(
  (state, props) => ({
    config: state.config,
  })
)
export default class app extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list:"",
      addModalFlg:false,
      modalList:"",
      addModalType:"",
      uploadTime:"",//上传时间
      contentModal:false,//
      showBigImgModal:false,//查看大图的弹窗
      imgArry:[],//图片数组
      imgIndex:"",//图片下标
    }
    this.keyword={"title":"","createTime":""}
    this.currentNumber = 1;
    this.pagesize = 10;
  }

  componentDidMount() {//页面首次加载
    this.selectList();
  }
  searchFN(){//点击搜索按钮
    this.keyword = {"title":this.props.form.getFieldValue('title'),"createTime":this.state.uploadTime};
    this.currentNumber=1;
    this.selectList();
  }
  selectList(pageNumber){//查询列表
    const datajson = Object.assign({"start":pageNumber||1,"end":this.pagesize}, this.keyword);
    this.currentNumber = pageNumber||1;
    this.props.dispatch(materiaSelect(
      datajson,
      (respose) => {
        this.setState({
          list: respose,
        })
    }))
  }

  uploadTimeFn(value){//选择上传时间
    if(value){
      value = value._d.format("yyyy-MM-dd hh:mm:ss") 
    }else{
      value = ""
    }
    this.setState({
      uploadTime:value
    })
  }

  addReport(type,data){//新增视频
    //编辑的情况  带数据去组件
    this.setState({
      addModalFlg: true,
      modalList:data,
      addModalType:type,
    })
  }
  addModalCancel(){//关闭新增视频弹窗
    this.setState({
      addModalFlg: false,
    });
  }

  deleteList(id){//删除信息
    Modal.confirm({
      content:"确定要删除该条信息么？",
      onOk:()=>{
        this.props.dispatch(deleteMateria(
          {"id":id},
          (respose) => {
            var length = this.state.list.respData.count ? this.state.list.respData.count : 0;
            if(Math.ceil(length/this.pagesize) == this.currentNumber && length%this.pagesize == 1 && this.currentNumber != 1){
              this.currentNumber = this.currentNumber - 1;
            }
            message.success(respose.respMsg);
            this.selectList(this.currentNumber);
            this.contentModalCancel();
        }))
      },
      onCancel:()=>{
      }
    })
  }

  contentModalCancel(){//关闭查看弹窗
    this.setState({
      contentModal: false,
    },()=>{
      this.setState({
        modalList: "",
      })
    })
  }

  showModal(id){//点击查看 
    this.props.dispatch(materiaInfo({"id":id},
      (respose) => {
        this.setState({
          contentModal: true,
          modalList:respose
        })

    }))
  }
  
  showBigImg(item,index){//点击查看大图
    //item 图片数组 index 点击的下标
    //单张图片
    var arry = [item];
    this.setState({
      showBigImgModal:true,
      imgArry:arry,
      imgIndex:index
    })
  }
  showBigImgModalCancel(){//关闭查看大图弹窗
    this.setState({
      showBigImgModal:false,
      imgArry:[],
      imgIndex:''
    })
  }

  columns() {
    return [
      {
        title: '视频编号',
        key: 'code',
        dataIndex: 'code',        
        width: '10%',
      },
      {
        title: '视频标题',
        dataIndex: 'title',
        key: 'title',
        width: '15%',
      },
      {
        title: '封面图',
        dataIndex: 'coverUrl',
        key: 'coverUrl',
        width: '10%',
        render: (text, recordId, index) => <img 
          style={{width:"50px",cursor:"pointer"}} 
          title="点击查看大图" 
          onClick={this.showBigImg.bind(this,text ? text :  require('../../images/baseHeader.png'),0)} 
          src={text ? text : require('../../images/baseHeader.png')} 
        />,
      },
      {
        title: '上传时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: '15%',
      },
      {
        title: '操作',
        width: '10%',
        render: (text, recordId, index) => 
        <div>
          <Button type="primary" size="small" onClick={this.showModal.bind(this,text.id)} style={{marginRight:"5px",marginBottom:"5px"}}>查看</Button>          
          <Button type="primary" size="small" onClick={this.deleteList.bind(this,text.id)} style={{marginRight:"5px",marginBottom:"5px"}}>删除</Button>  
        </div>,
      },
    ]
  }

  render() {
    const { houseCheckSearchResult, form } = this.props;
    const { getFieldDecorator } = form
    const { TextArea } = Input;
    const videoCheckList = this.state.list ?this.state.list.respData:[] ;
    const modalList = this.state.modalList.respData ? this.state.modalList.respData :[];
    const dateFormat = 'YYYY/MM/DD';
    return (
      <div className="page">
        <div className="search" style={{ marginBottom: '10px' }}>
          <Form onSubmit={this.searchFN.bind(this)} layout="inline">
            <FormItem label="视频标题">
              {
                getFieldDecorator('title', {
                  rules: [{
                    required: false,
                  }],
                })(
                  <Input placeholder="请输入视频标题" size="default" style={{ width: '200px' }} />
                )
              }
            </FormItem>
            <FormItem label="注册时间">
              <DatePicker onChange={this.uploadTimeFn.bind(this)} format={dateFormat} />
            </FormItem>
            <Button type="primary" onClick={this.searchFN.bind(this)}>搜索</Button>
            <Button type="primary" style={{marginLeft:"10px"}} onClick={this.addReport.bind(this,1,{})}>新增</Button>
          </Form>
        </div>
          <Table
            rowKey="id"
            dataSource={videoCheckList.resultData}
            columns={this.columns()}
            pagination={{ total: videoCheckList.count, current:this.currentNumber, pageSize: this.pagesize, onChange:this.selectList.bind(this)}}
            scroll={{ y: true }}
            rowClassName={(record, index) => record.id === 1 ? 'red' : 'base'}
          />
        {/* 信息展示弹窗 */}
        {
          this.state.contentModal?
          <Modal
            width={"80%"}
            visible={this.state.contentModal}
            title="素材详情"
            onCancel={this.contentModalCancel.bind(this)}
            footer={[
              <Button key="submit" type="primary"  onClick={this.deleteList.bind(this,modalList.id)}>删除</Button>,
            ]}
          >
            <ul className="joinBlackListModal">
              <li>
                <span className="title">上传人:</span><span className="content">{modalList.creatorName}</span>
              </li>
              <li>
                <span className="title">上传时间:</span><span className="content">{modalList.createTime}</span>
              </li>
              <li>
                <span className="title">视频标题:</span><span className="content">{modalList.title}</span>
              </li>
              <li>
                <span className="title">视频封面:</span>
                <span className="content">
                  <img 
                    style={{width:"80px",cursor:"pointer"}} 
                    title="点击查看大图" 
                    onClick={this.showBigImg.bind(this,modalList.coverUrl ? modalList.coverUrl :  require('../../images/baseHeader.png'),0)}
                    src={modalList.coverUrl ? modalList.coverUrl : require('../../images/baseHeader.png')} 
                  />
                </span>
              </li>
              <li>
                <span className="title">视频内容:</span>
                <span className="content" >
                  <video style={{width:'500px'}} controls="controls" src={modalList.videoTranscodingUrl}/>
                </span>
              </li>
            </ul>
          </Modal>:''
        }
        
        {/* 添加视频 */}
        {
          this.state.addModalFlg ? 
          <ModalAddMaterialVideo 
            type={this.state.addModalType}
            ModalFlg={this.state.addModalFlg} 
            ModalCancel={this.addModalCancel.bind(this)} 
            callback={this.selectList.bind(this,this.currentNumber)}
            content={this.state.modalList.id ? this.state.modalList : {}}
          /> :''
        }
        {/* 查看大图的弹窗 */}
        {
          this.state.showBigImgModal?
          <ShowBigImg visible={this.state.showBigImgModal} imgArry={this.state.imgArry} imgIndex={this.state.imgIndex} closeModal={this.showBigImgModalCancel.bind(this)} />
          :""
        }
      </div>
    )
  }
}
